<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html class="no-js">
<head>
    <%@ include file="./../common/meta.jsp" %>
    <link rel="stylesheet" href="../../css/good-shop-detail.css">
</head>
<body>
<header data-am-sticky class="am-header am-header-default am-no-layout">
    <div class="am-header-left am-header-nav">
        <a href="./store-detail.jsp" class="" id="last">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">好店服务</h1>
</header>


<div class="am-content">
    <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}'>
        <ul class="am-slides" id="view-port">
        </ul>
    </div>
</div>


<div class="buy-bottom">
    <div id="dtsj">
    </div>
    <div class="buy-info">
        <div class="buy-num">
            <span class="text">数量：</span>
            <span class="sub subtraction"></span>
            <span class="number" id="number">1</span>
            <span class="plus plus-able"></span>
        </div>
        <div class="buy-price" id="buyPrice">
            应支付:<span id="yzf">...</span>元
            实际支付:<span id="sjzf">...</span>元
        </div>
    </div>


    <div class="buy-action">
        <div class="buy-go" id="pay-btn">立即购买</div>
    </div>

</div>


<script id="provider-image-template" type="text/x-handlebars-template">
    {{#each images}}
    <li>
        <img src="{{../imageBase}}{{this}}">

    </li>
    {{/each}}
</script>


<script id="provider-price-template" type="text/x-handlebars-template">
    <div class="buy-info detail-size">
        <span class="label">服务名称:{{servicename}}</span>
    </div>

    <div class="buy-info detail-size">
        <span class="label">原价:<b>{{serviceprice}}</b></span> &nbsp; &nbsp; <span
            class="label">现价:<b id="xj">{{servicenowprice}}</b></span>
    </div>

    <div class="buy-info detail-size">
        <span class="label">单件商品龙凤币抵扣金额:<b id="lfb">{{lfbdk}}</b>(<b id="totalLfb">{{lfb}}</b>)</span>
    </div>

</script>

<%@ include file="./../common/footer.jsp" %>
<script src="../../js/common/common.js"></script>

<script>
    $(function () {
        var id = "<%=request.getParameter("id")%>";
        var catlogid = "<%=request.getParameter("catId")%>";
        var serviceId = "<%=request.getParameter("serviceId")%>";
        var href = $("#last").attr("href");
        $("#last").attr("href", href + "?catId=" + catlogid + "&id=" + id);


        var user = JSON.parse(localStorage.getItem("user"));
        if (user == null || user == "null") {
            window.location.href = './login/login.jsp';

        }


        var url = "/h5GoodShop/getShopProvider?id=" + serviceId + "&accountId=" + user.id;
        $.post(url, function (result) {

            var source = $('#provider-image-template').html();
            var template = Handlebars.compile(source);
            var html = template(result);
            $(".am-slides").append(html);
            $('.am-slider').flexslider();


            var source = $('#provider-price-template').html();
            var template = Handlebars.compile(source);
            var html = template(result);
            $("#dtsj").append(html);


            var num = 1;
            var xj = $("#xj").text();
            var lfb = $("#lfb").text();
            var yzf = num * xj;

            var sjzf = yzf - lfb * num;
            $('#yzf').text(yzf);
            $('#sjzf').text(sjzf);

        });


        $(".sub").on('click', function () {
            if ($(this).hasClass('subtraction')) {
                return;
            }
            var num = parseInt($('.number').text());
            num--;
            if (num < 2) {
                $('.sub').addClass('subtraction').removeClass('subtractionabled');
            }
            if (num < 10) {
                $('.plus').addClass('plus-able').removeClass('plus-abled');
            }
            $('.number').text(num);

            var xj = $("#xj").text();
            var lfb = $("#lfb").text() * num;

            var totalLfb = $("#totalLfb").text();
            if (totalLfb < lfb) {
                lfb = totalLfb;
            }
            var yzf = num * xj;
            var sjzf = yzf - lfb
            $('#yzf').text(yzf);
            $('#sjzf').text(sjzf);
        });


        $('.plus').on('click', function () {
            if ($(this).hasClass('plus-abled')) {
                return;
            }
            var num = parseInt($('.number').text());
            num++;
            if (num > 1) {
                $('.sub').addClass('subtractionabled').removeClass('subtraction');
            }
            if (num >= 10) {
                $('.plus').addClass('plus-abled').removeClass('plus-able');
            }
            $('.number').text(num);
            var xj = $("#xj").text();
            var lfb = $("#lfb").text() * num;
            var totalLfb = $("#totalLfb").text();
            if (totalLfb < lfb) {
                lfb = totalLfb;
            }

            var yzf = num * xj;

            var sjzf = yzf - lfb
            $('#yzf').text(yzf);
            $('#sjzf').text(sjzf);
        });


    });


    $("#pay-btn").click(function () {
        var num = $('.number').text();
        var catlogid = "<%=request.getParameter("catId")%>";
        var serviceId = "<%=request.getParameter("serviceId")%>";
        var id = "<%=request.getParameter("id")%>";
        var url = "./store-order.jsp?serviceId=" + serviceId + "&catId=" + catlogid + "&id=" + id + "&num=" + num;
        window.location.href = url;

    })

</script>

</body>
</html>